<script setup lang="ts">
const listData = [
    { name: "购物指南", list: ["购物流程", "会员介绍", "生活旅行/团购", "常见问题", "购物指南"] },
    { name: "配送方式", list: ["上门自提", "211限时达", "配送服务查询", "配送费收取标准", "海外配送"] },
    { name: "支付方式", list: ["货到付款", "在线支付", "分期付款", "邮局汇款", "公司转账"] },
    { name: "售后服务", list: ["售后政策", "价格保护", "退款说明", "返修/退换货", "取消订单"] },
    { name: "特色服务", list: ["夺宝岛", "DIY装机", "延保服务", "尚品汇E卡", "尚品汇通信"] }
]
</script>

<template>
    <footer>
        <section class="menu-list">
            <!-- 重复的数据遍历出来 -->
            <div class="menu-section" v-for="_data in listData">
                <h3 class="menu-header">{{ _data.name }}</h3>
                <ul v-for="_item in _data.list">
                    <li>{{ _item }}</li>
                </ul>
            </div>
            <!-- 最后的图片 -->
            <div class="menu-section">
                <h3 class="menu-header">帮助中心</h3>
                <img src="./images/nvdi.webp" alt="help">
            </div>
        </section>
        <section class="other-info">
            <ul class="link-list">
                <li>关于我们</li>
                <li>联系我们</li>
                <li>商家入住</li>
                <li>营销中心</li>
                <li>友情链接</li>
                <li>关于我们</li>
                <li>联系我们</li>
                <li>商家入住</li>
                <li>营销中心</li>
                <li>友情链接</li>
            </ul>
            <div class="address">地址：北京市昌平区</div>
            <div class="auth">京ICP备19006430号</div>
        </section>
    </footer>
</template>

<style scoped lang="less">
@import "@/styles/mixins.less";
@import "@/styles/common.less";
@import "@/styles/extends.less";

footer {
    .border-1px-switch(top, @boder-gray-footer);
    background-color: @bg-color-gray;
    padding: 30px;

    .menu-list {
        .flex-row-between();
        .border-1px-switch(bottom, @boder-gray-footer);
        padding-bottom: 30px;

        .menu-section {
            margin-right: 100px;
        }

        .menu-header {
            font-weight: bold;
            margin-bottom: 5px;
        }

        ul {
            li {
                padding: 2px 0;
                font-size: @min-font-size;
            }
        }

        img {
            margin-top: 5px;
            width: 100px;
            height: 100px;
        }
    }

    .other-info {
        font-size: @min-font-size;
        margin-top: 20px;

        .link-list {
            .flex-row-center();

            li {
                padding: 0 10px;

                &:not(:last-child) {
                    .border-1px-switch(right, @theme-black)
                }
            }
        }

        .address,
        .auth {
            text-align: center;
            margin-top: 20px;
        }
    }
}
</style>
